<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<title>编辑商品 - 教师管理系统</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Tailwind 配置 -->
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#3B82F6',
                    secondary: '#10B981',
                    accent: '#F59E0B',
                    neutral: '#64748B',
                    light: '#F8FAFC',
                    dark: '#1E293B'
                },
                fontFamily: {
                    sans: ['Inter', 'system-ui', 'sans-serif'],
                },
            }
        }
    }
</script>

<!-- 自定义工具类 -->
<style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .form-input {
            @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary
            focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all duration-300;
        }
        .card-shadow {
            @apply shadow-md hover:shadow-lg transition-shadow duration-300;
        }
        .btn-effect {
            @apply transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg active:translate-y-0;
        }
        .nav-icon {
            @apply text-xl p-2 rounded-full transition-all duration-300 hover:bg-primary/10;
        }
        .nav-icon.active {
            @apply bg-primary/10 text-primary;
        }
    }
</style>

<style>
    /* 全局动画 */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
        animation: fadeIn 0.5s ease-out forwards;
    }

    /* 表单元素动画 */
    .form-group {
        transition: all 0.3s ease;
    }

    .form-group:focus-within {
        transform: translateX(4px);
    }

    /* 平滑滚动 */
    html {
        scroll-behavior: smooth;
    }
</style>


<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-3">
            <i class="fa fa-graduation-cap text-primary text-2xl"></i>
        </div>
        <nav class="hidden md:flex items-center space-x-1">
            <a href="#" class="nav-icon text-neutral hover:text-primary" title="首页">
                <i class="fa fa-home"></i>
            </a>
            <a href="#" class="nav-icon text-neutral hover:text-primary" title="课程管理">
                <i class="fa fa-book"></i>
            </a>
            <a href="<c:url value='/teacher/list'/>" class="nav-icon active" title="商品管理">
                <i class="fa fa-folder-open"></i>
            </a>
            <a href="#" class="nav-icon text-neutral hover:text-primary" title="学生管理">
                <i class="fa fa-users"></i>
            </a>
            <a href="#" class="nav-icon text-neutral hover:text-primary" title="个人中心">
                <i class="fa fa-user-circle"></i>
            </a>
        </nav>
        <button class="md:hidden text-neutral text-xl p-2" title="菜单">
            <i class="fa fa-bars"></i>
        </button>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 页面标题和导航路径 -->
    <div class="mb-8">
        <div class="text-sm text-neutral mb-4">
            <span class="text-primary font-medium">编辑商品</span>
        </div>
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">编辑商品信息</h2>
                <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mt-2"></div>
            </div>
            <div class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium flex items-center">
                <i class="fa fa-hashtag mr-2"></i>
                <span>商品ID: ${goods.gid}</span>
            </div>
        </div>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in">
        <form action="<c:url value='/teacher/edit'/>" method="post" id="productForm" class="space-y-8">
            <input type="hidden" name="gid" value="${goods.gid}">

            <!-- 基本信息部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-info-circle text-primary mr-3"></i>基本信息
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 商品名称 -->
                    <div class="form-group">
                        <label for="gname" class="block text-sm font-medium text-gray-700 mb-2">
                            商品名称 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="gname" name="gname" value="${goods.gname}" placeholder="请输入商品名称" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入有效的商品名称（至少2个字符）</p>
                    </div>

                    <!-- 价格 -->
                    <div class="form-group">
                        <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
                            价格 <span class="text-red-500">*</span>
                        </label>
                        <input type="number" step="0.01" min="0" id="price" name="price" value="${goods.price}" placeholder="请输入商品价格" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入有效的价格（大于0）</p>
                    </div>

                    <!-- 类型 -->
                    <div class="form-group">
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-2">
                            类型 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="type" name="type" value="${goods.type}" placeholder="请输入商品类型" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入商品类型</p>
                    </div>

                    <!-- 作者 -->
                    <div class="form-group">
                        <label for="author" class="block text-sm font-medium text-gray-700 mb-2">
                            作者 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="author" name="author" value="${goods.author}" placeholder="作者名称" class="form-input" required>
                        <p class="text-red-500 text-xs mt-1.5 hidden">请输入作者名称</p>
                    </div>
                </div>
            </div>

            <!-- 资源信息部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-file-text-o text-primary mr-3"></i>资源信息
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 图片 -->
                    <div class="form-group">
                        <label for="img" class="block text-sm font-medium text-gray-700 mb-2">
                            图片
                        </label>
                        <input type="url" id="img" name="img" value="${goods.img}" placeholder="请输入图片URL" class="form-input">
                        <p class="text-neutral text-xs mt-1.5">支持JPG、PNG格式的网络图片地址</p>
                    </div>

                    <!-- 视频链接 -->
                    <div class="form-group">
                        <label for="video" class="block text-sm font-medium text-gray-700 mb-2">
                            视频链接
                        </label>
                        <input type="url" id="video" name="video" value="${goods.video}" placeholder="请输入视频链接" class="form-input">
                        <p class="text-neutral text-xs mt-1.5">支持主流视频平台的分享链接</p>
                    </div>

                    <!-- 时长 -->
                    <div class="form-group md:col-span-2">
                        <label for="duration" class="block text-sm font-medium text-gray-700 mb-2">
                            时长
                        </label>
                        <input type="text" id="duration" name="duration" value="${goods.duration}" placeholder="请输入时长，例如：45分钟" class="form-input">
                    </div>
                </div>
            </div>

            <!-- 商品描述部分 -->
            <div>
                <h3 class="text-lg font-semibold mb-5 flex items-center text-dark">
                    <i class="fa fa-align-left text-primary mr-3"></i>商品描述
                    <div class="flex-grow h-px bg-gray-200 ml-3"></div>
                </h3>

                <div class="form-group">
                    <label for="describe1" class="block text-sm font-medium text-gray-700 mb-2">
                        描述 <span class="text-red-500">*</span>
                    </label>
                    <textarea id="describe1" name="describe1" placeholder="请输入商品描述，介绍商品内容、特点和使用价值等信息" class="form-input min-h-[120px] resize-y" required>${goods.describe1}</textarea>
                    <p class="text-red-500 text-xs mt-1.5 hidden">描述内容至少需要20个字符</p>
                    <p class="text-neutral text-xs mt-1.5">请简要介绍商品的主要内容和特点（不少于20字）</p>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
                <button type="button" id="resetBtn" class="bg-gray-200 text-gray-700 px-6 py-3 rounded-lg font-medium btn-effect hover:bg-gray-300">
                    <i class="fa fa-refresh mr-2"></i>重置
                </button>
                <button type="submit" class="bg-primary text-white px-6 py-3 rounded-lg font-medium btn-effect hover:bg-primary/90">
                    <i class="fa fa-check-circle mr-2"></i>保存修改
                </button>
            </div>
        </form>
    </div>

    <!-- 帮助卡片 -->
    <div class="bg-white rounded-xl p-6 mt-6 card-shadow">
        <h4 class="font-medium text-dark mb-3 flex items-center">
            <i class="fa fa-lightbulb-o text-accent mr-2"></i>编辑提示
        </h4>
        <ul class="text-neutral text-sm space-y-2">
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>带 <span class="text-red-500">*</span> 的字段为必填项，必须填写</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>修改完成后点击"保存修改"按钮提交更新</span>
            </li>
            <li class="flex items-start">
                <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                <span>图片URL修改后将实时更新商品展示图片</span>
            </li>
        </ul>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t mt-12 py-6"></footer>
